<script setup>
import {ref,onMounted} from 'vue'
import {getPaymentDataAPI} from "../../api/monthCart"
const status = ref([{id:0,name:'未缴纳'},{id:1,name:'缴纳'},{id:'',name:'全部'}])
const total = ref(0)
const options = status.value.map(i=>{
  return{
    value:i.id,
    label:i.name
  }
})
const data = ref({
  page:1,
  pageSize:5,
  carNumber:null,
  paymentStatus:null
})
const paymentDate = ref([])
 const getPaymentData= async()=>{
  const res = await getPaymentDataAPI(data.value)
  paymentDate.value = res.data.rows
  total.value = res.data.total
 }
 onMounted(()=>{
  getPaymentData()
 })
 const handleSizeChange = (e)=>{
    data.value.pageSize = e
    getPaymentData()
 }
 const handleCurrentChange = (e) =>{
   data.value.page = e
   getPaymentData()
 }
 const paymentStatus = (id)=>{
  console.log(id);
   return id === 'Alipay'?"支付宝": id==="WeChat"? "微信" : id==='Cash'?'线下':'未知'
 }
 const query = ()=>{
   getPaymentData()
 }
</script>

<template>
  <div class="payment">
    <div class="top">
      <el-form inline>
        <el-form-item  label="车牌号码">
          <el-input v-model="data.carNumber" placeholder="请输入车牌号码"></el-input>
        </el-form-item>
        <el-form-item label="缴纳状态">
          <el-select-v2
              v-model="data.paymentStatus"
              placeholder="请选择"
              :options="options"
            />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="paymentDate" label-width="180px">
      <el-table-column type="index" label="序号" width="60" ></el-table-column>
      <el-table-column label="车牌号码" prop="carNumber"></el-table-column>
      <el-table-column label="收费类型" prop="chargeType">
        <template #default="{row}">
          <span>{{ row.chargeType==='card'?"月卡":"临时停车" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="停车总时长" prop="parkingTime"></el-table-column>
      <el-table-column label="缴纳费用(元)" prop="actualCharge"></el-table-column>
      <el-table-column label="缴纳状态" prop="paymentStatus">
        <template #default="{row}">
          <span>{{ status[row.paymentStatus].name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="缴纳方式" prop="paymentMethod">
        <template #default="{row}">
          <span>{{ paymentStatus(row.paymentMethod) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="缴纳时间" prop="paymentTime"></el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="data.page"
      v-model:page-size="data.pageSize"
      :page-sizes="[5, 10, 20, 30]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped>
.payment{
  height: 100%;
  padding: 20px;
  background-color: #fff;
}
.top{
  border-bottom:1px solid #EFEFEF;
  margin-bottom: 20px;
}
</style>
